<template>
  <div class="login">
    <header>
          <router-link to="/home"><span class="icon">&#xe6b0;</span></router-link>       
          <h1>登陆</h1>
    </header>
    <div class="main">
        <div class="log_type" >
            <span class="user_icon">&#xe60d;</span>
            <input type="text" placeholder="手机号/邮箱/用户名" name class="userName" v-model="username" ref="inputU" :blur="changeValue"/>
            <p class="name_empty">{{msg}}</p>
        </div>
        <div class="log_type">
            <span class="pas_icon">&#xe60a;</span>
            <input type="password" placeholder="密码" name class="passWord" v-model="password"  ref="inputP"/>
            <p class="pasword_empty" :blur="changeValue">请输入账号</p>
        </div>
        <div class="login_foo" @click="velidare">
            <router-link to="/mine">登陆</router-link>
        </div>
    </div>
  </div>
</template>

<script>

export default {
    name: 'hello',
    data () {
        return {
            username: '',
            password: '',
            msg
        }
    },
    methods: {
    },
    watch: {
        test(newVal, oldVal) {
            console.log(newVal, oldVal)
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
header{
    height: 1.2rem;
    width: 100%;
    position: fixed;
    top: 0;
    background-color: #0093e7;
    line-height: 1.7;
    min-height: 1.25333rem;
}
header h1{
    font-size: .48rem;
    font-weight: normal;
    text-align: center;
    color: #fff;
    line-height: 1.2;
    padding-top: .32rem;
}
.icon{
    font-family: 'iconfont';
    position: absolute;
    left:.1333rem;
    font-size:.88rem;
    color: #fff;
    line-height: 1.2rem;
}
.main{
    width: 100%;
    height: 16rem;
    background: #efefef;
    padding-top: 1.7rem;
}
.log_type{
    margin: 0 .27rem 0 .27rem;
    position: relative;
}
.userName, .passWord{
    width: 88%;
    border: 1px solid #e8e8e8;
    height: 1.1rem;
    line-height: 1.5;
    font-size: .43rem;
    color: #5e5e5e;
    padding-left: 1.12rem; 
    outline: none;
    border-radius: .2rem;
}
.user_icon, .pas_icon{
    font-family: 'iconfont';
    font-size: 29px;
    position: absolute;
    top: .213rem;
    left: .25rem;
}
.name_empty, .pasword_empty{
    color: #e72418;
    font-size: .4rem;
    margin: .14rem .3rem 0;
    line-height: .7rem;
}
.login_foo{
    width: 96%;
    height: 1.42rem;
    line-height: 1.42rem;
    font-size: .64rem; 
    text-align: center;
    background-color: #0099f1; 
    margin: 2rem auto;

}
.login_foo a{
    color: #fff;
}

@font-face {
  font-family: 'iconfont';  /* project id 283727 */
  src: url('//at.alicdn.com/t/font_yx4g0oc2gz2utyb9.eot');
  src: url('//at.alicdn.com/t/font_yx4g0oc2gz2utyb9.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_yx4g0oc2gz2utyb9.woff') format('woff'),
  url('//at.alicdn.com/t/font_yx4g0oc2gz2utyb9.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_yx4g0oc2gz2utyb9.svg#iconfont') format('svg');
}
</style>
